<template>
	<view class="flex flex-col h-screen">
		<view class="p-2 bg-white">
			<u-input clearable placeholder="请输入关键字" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
				shape="circle"></u-input>
		</view>
		<view class="p bg-white">
			<scroll-view scroll-x>
				<view class="whitespace-nowrap p-3">
					<view v-for="(i, index) in navNameList" :key="index" @click="onNav(index)" class="inline-block">
						<text v-if="index > 0" class="mx-2">></text>
						<text :class="{ 'no-active': index !== level }">{{i}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flex-1 h-0">
			<scroll-view scroll-y class="h-full" v-if="list">
				<view v-for="(i, key) in list[level]" :key="i.goodsCategoryCode"
					class="p-2 m-2 bg-white flex justify-between rounded" @click="onCategory(i)">
					<view class="text-sm">
						{{ i.goodsCategoryName }}
					</view>
					<u-icon name="arrow-right" :size="16" color="#ccc" v-if="i.sons.length || i.goods.length"></u-icon>
				</view>
				<view v-for="(i, key) in goods[level]" :key="i.goodsSkuId" class="p-3 m-2 bg-white flex rounded"
					@click="onGoods(i)" :style="{opacity: i.disabled?'0.6':1}">
					<view class="flex items-center mr-3">
						<u-icon name="checkmark-circle" color="#ccc" v-if="!i.choosed"></u-icon>
						<u-icon name="checkmark-circle-fill" color="#2a6757" v-else></u-icon>
					</view>
					<view class="mr-3">
						<u-image width="100" height="100" :src="getFilePath(i.goodsSkuCoverPic)" radius="15"></u-image>
					</view>
					<view class="text-sm flex-1">
						<view class="">
							<text class="">商品名称</text>：
							<text class="text-black-666">{{i.goodsSkuName}}</text>
						</view>
						<view class="">
							<text class="">商品规格</text>：
							<text class="text-black-666">{{i.goodsMeasuringName}}</text>
						</view>
						<view class="">
							<text class="">标准价</text>：
							<text class="text-black-666">¥{{(i.standardPrice/100).toFixed(2)}}</text>
						</view>
						<view class="">
							<text class="">会员价</text>：
							<text class="text-black-666">¥{{(i.memberPrice/100).toFixed(2)}}</text>
						</view>
						<view class="">
							<text class="">产地</text>：
							<text class="text-black-666">{{i.productionBaseName}}</text>
						</view>
					</view>

				</view>
				<u-gap height="60"></u-gap>
			</scroll-view>
			<u-popup :show="showGoodsPopUp" round="15">
				<view>
					<view class="flex justify-between u-border-bottom p-3">
						<text @click="showGoodsPopUp=false">取消</text>

					</view>
					<view class="p-3" style="height: 400px">
						<scroll-view scroll-y class="h-full">
							<view v-for="(i, key) in goodsList" :key="i.goodsSkuId"
								class="p-2 m-2 bg-white flex rounded u-border-bottom" @click="onGoods(i)">
								<view class="flex items-center mr-3">
									<u-icon name="checkmark-circle" color="#ccc" v-if="!i.choosed"></u-icon>
									<u-icon name="checkmark-circle-fill" color="#2a6757" v-else></u-icon>
								</view>
								<view class="mr-3">
									<u-image width="60" height="60" :src="getFilePath(i.goodsSkuCoverPic)" radius="15">
									</u-image>
								</view>
								<view class="text-sm">
									{{ i.goodsName }}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</u-popup>
		</view>
		
		<view class="flex items-center fixed bottom-0 left-0 right-0 bg-white p-3 u-border-top">

			<view class="u-info-dark text-sm">
				已选择<text class="text-primary">{{goodsSum}} </text> 件商品
			</view>
			<view class="text-sm text-primary ml-3 flex" v-if="goodsSum" @click="showGoodsPopUp = true">
				查看已选商品
				<u-icon name="arrow-up" color="#2A6757" size="14"></u-icon>
			</view>
			<view class="" style="margin-left: auto;">
				<u-button type="primary" shape="circle" @click="onAddBatch">添加</u-button>
			</view>

		</view>

	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import {
		route,
		showModal,
		toast
	} from '../../utils/utils'
	import {
		getFilePath
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				showGoodsPopUp: false,
				list: null,
				goods: null,
				level: 0,
				navNameList: ['全部'],
				goodsList: []
			}
		},
		computed: {
			goodsSum() {
				console.log()
				return this.goodsList.length
			}
		},
		onLoad(query) {
			const {
				allocationDocumentId,
				allocationShopsId,
				goodsSkuIdList,
				purchaseBillId,
				type
			} = query
			this.allocationDocumentId = allocationDocumentId
			this.allocationShopsId = allocationShopsId
			this.getBaseGoodsCategoryList()

			this.goodsSkuIdList = goodsSkuIdList
			this.purchaseBillId = purchaseBillId
			this.type = type
			// this.getBaseGoodsList()
		},
		methods: {
			onAddBatch() {
				if (!this.goodsSum) return toast('请先选择商品')
				console.log(this.goodsList)
				console.log(this.type )
				if (this.type == 3) {
					// 采货单
					const goods = this.goodsList.map(i => {
						return {
							goodsSkuId: i.goodsSkuId,
						}
					})
					request('addPurchaseGoodsBatch', {
						method: 'post',
						data: {
							purchaseBillId: this.purchaseBillId,
							goods
						},
						row: true
					}).then(res => {
						console.log(res)
						if (res.code == 200) {
							toast('添加成功')
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							toast(res.msg)
						}
					})
				} else {
					const data = this.goodsList.map(i => {
						return {
							allocationDocumentId: this.allocationDocumentId,
							allocationShopsId: this.allocationShopsId,
							goodsCount: 0,
							goodsTotal: 0,
							goodsId: i.goodsId,
							goodsSkuId: i.goodsSkuId,
							goodsMeasuringUnitId: i.goodsMeasuringUnitId,
							goodsMeasuringName: i.goodsMeasuringName,
							goodsSpecification: i.goodsSpecification,
							isWeighing: i.isWeighing
						}
					})
					console.log(data)
					request('addAllocationShopGoodsBatch', {
						method: 'post',
						data,
						row: true
					}).then(res => {
						console.log(res)
						if (res.code == 200) {
							toast('添加成功')
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							toast(res.msg)
						}
					})
				}
				
			},
			onGoods(i) {
				if (i.disabled) return

				i.choosed = !i.choosed
				if (i.choosed) {
					this.goodsList = [i, ...this.goodsList]
				} else {
					this.goodsList = this.goodsList.filter(item => item.goodsSkuId !== i.goodsSkuId)
				}

				console.log(this.goodsList)
			},
			getFilePath,
			onNav(index) {
				console.log(index)
				this.level = index
				this.navNameList = this.navNameList.slice(0, index + 1)
			},
			async onCategory({
				goodsCategoryCode,
				goodsCategoryName,
				sons,
				goods
			}) {
				console.log(sons)
				goods.forEach(i => i.choosed = false)
				goods.forEach(i => {
					if (this.goodsSkuIdList.includes(i.goodsSkuId)) {
						i.choosed = true
						i.disabled = true
					}
				})

				console.log(this.level)
				this.level = this.level + 1
				this.list[this.level] = sons
				this.goods[this.level] = goods

				this.navNameList = [...this.navNameList, goodsCategoryName]
				return
				const res = await this.getBaseGoodsList(goodsCategoryCode)
				console.log(res)
			},
			getBaseGoodsCategoryList() {
				request('baseGoodsCategory').then(res => {
					console.log(res)
					const {
						sons,
						goods
					} = res
					this.list = {
						0: sons
					}
					goods.forEach(i => i.choosed = false)

					console.log(this.goodsSkuIdList)
					goods.forEach(i => {
						if (this.goodsSkuIdList.includes(i.goodsSkuId)) {
							i.choosed = true
							i.disabled = true
						}
					})

					this.goods = {
						0: goods
					}
				})
			},
			async getBaseGoodsList(goodsCategoryCode) {
				const res = await request('baseGoodsList', {
					data: {
						goodsCategoryCode
					},
					row: true
				})
				console.log(res)
				if (res.code === 200) {
					return res.rows
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.no-active {
		text-decoration: underline;
		color: $u-primary;
	}
</style>
